<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>attribute vs property</title>
</head>
<body>
<input id="the-input" type="typo" value="Name:"/>
</body>
</html>

<script>
// attribute still remains the original value
input.getAttribute('id') // the-input
input.getAttribute('type') // typo
input.getAttribute('value') // Name:

// property is a different story
input.id // the-input
input.type //  text
input.value // Jack

</script>
